<template>
    <div class="right">
        <div class="header">会员中心-我的纠错</div>
        <div class="content" v-loading="loading">
            <div class="content_div">
                <div class="content_items" v-for="(item, index) in list" :key="index">
                    <div class="left">
                        <div class="left_items">[错题] {{ item.name }}</div>
                        <div class="left_items red">[原因] {{ item.reason }}</div>
                        <div class="date">{{ item.createTime }}</div>
                    </div>
                    <div class="right">
                        <div class="num" :style="{ color: Number(item.point) > 0 ? 'rgb(179, 173, 173)' : 'red' }">
                            {{ (Number(item.point) > 0 ? '+' : '') + item.point }}
                        </div>
                        <div class="status">{{ item.status == '0' ? '待审' : item.status == '1' ? '未通过' : '已通过'
                            }}</div>
                    </div>
                </div>
            </div>
            <div class="paginations">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getquestionmyList" :layout="'prev, pager, next'"
                    :prevText="'上一页'" :nextText="'下一页'" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { errormyList } from '@/api/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
const list = ref([])
const total = ref(0)
/** 列表 */
const getquestionmyList = async () => {
    loading.value = true
    const res = await errormyList(queryParams.value)
    res.rows.forEach(element => {
        element.createTime = element.createTime.split(' ')[0].replace(/-/g, "/")
    });
    list.value = res.rows
    total.value = res.total
    loading.value = false
}

onMounted(async () => {
    getquestionmyList()
});
</script>
<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: center;

    .upload_button {
        width: 150px;
        height: 40px;
        background: #22AFE5;
        border-radius: 14px;
        text-align: center;
        line-height: 40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        cursor: pointer;
    }
}

.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        box-sizing: border-box;
        padding: 40px 0 0 0;
        color: #969696;

        .content_div {
            width: 100%;
            height: calc(100% - 72px);
            overflow: auto;

            .content_items {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #E6E6E6;
                box-sizing: border-box;
                padding: 10px 0;

                .left {
                    width: 400px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #000000;
                    margin-right: 100px;

                    .left_items {
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-top: 15px;
                    }

                    .red{
                        color: #FF0101;     
                    }

                    .date {
                        margin-top: 15px;
                        margin-left: 42px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #969696;
                    }
                }

                .right {
                    flex: 1;
                    text-align: right;
                    margin-right: 20px;

                    .num {
                        font-size: 30px;
                    }

                    .status {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #969696;
                        margin-top: 35px;
                    }
                }
            }


        }


        .paginations {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }
}
</style>